<template>
  <div>
    <button @click="changeData">修改vuex数据</button>

    <button @click="go">路由跳转</button>
  </div>
</template>

<script>
// 先导入useStore实例再使用const store = useStore();
import { useStore } from "vuex";
// 使用路由时先导入 useRouter跳转路的  useRoute获取当前的路由信息的
import { useRouter, useRoute } from "vue-router";
export default {
  name: "CustomRefView",
  setup() {
    // 先获取useRoute()对象再使用
    const store = useStore();
    let changeData = () => {
      store.commit("setMotto", "换一句你的人生格言吧"); // 上一个AboutView.vue页面的motto数据就变了
    };

    let route = useRoute();
    console.log(route);
    console.log(route.query); // 等价于之前的this.$route.query

    // 先获取useRouter()对象再使用
    const router = useRouter();
    let go = () => {
      router.push({
        name: "about",
        query: {
          a: 999999,
        },
      });
    };

    return {
      changeData,
      go,
    };
  },
};
</script>

<style lang="less" scoped></style>
